<template>
  <div class="bg">
    <div class="left" @click="pre">{{ "<" }}</div>
    <div class="right" @click="next">{{ ">" }}</div>
    <div class="pic" :style="`left:${left}%`">
		<div class="p1"></div>
      <!-- <img src="../assets/pics/bg.jpg" alt="" class="p1" /> -->
      <div class="p2"></div>
      <div class="p3"></div>
    </div>
  </div>
</template>

<script lang="ts">
import { reactive, ref } from "@vue/reactivity";
export default {
  setup() {
    let left = ref(100);
    function next() {
      left.value -= 100;
      if (left.value === -200) {
        left.value = 100;
      }
    }
    function pre() {
      if (left.value === 100) {
        left.value = -200;
      }
      left.value += 100;
    }

    return {
      left,
      next,
      pre,
    };
  },
};
</script>

<style lang="scss" scoped>
.bg {
  width: 100%;
  overflow-x: hidden;
}
.left,
.right {
  text-align: center;
  height: 900px;
  line-height: 900px;
  position: absolute;
  z-index: 3;
  width: 80px;
  font-size: 30px;
  color: rgb(54, 54, 54);
  font-weight: 300;
}
.left:hover {
  cursor: pointer;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.5), transparent);
}
.left {
  left: 0%;
}
.right:hover {
  cursor: pointer;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.5), transparent);
}
.right {
  right: 0%;
}
.p1,
.p2,
.p3,
.p4 {
  position: absolute;
  width: 100%;
  height: 900px;
  line-height: 700px;
  text-align: center;
}
.p1 {
  background-image: url(../assets/pics/bg.jpg);
  background-attachment: fixed;
  background-size: cover;
  left: -100%;
  width: 100%;
}
.p2 {
	  background-image: url(../assets/pics/lbt1.jpg);
  background-attachment: fixed;
  background-size:cover;
}
.p3 {
  left: 100%;
    background-image: url(../assets/pics/lbt2.jpg);
  background-attachment: fixed;
  background-size: cover;
}

.pic {
  position: relative;
  transition: 0.5s ease;
}
</style>